<template>
  <div id="div">
    <div class="text item" v-show="isShow">
      <!-- 排序 -->
      <p>
        <span>
          <el-icon color="rgb(45,72,195)"><Sort /></el-icon> 排序
        </span>

        <span class="order">默认排序</span>
        <span
          >订单金额高<el-icon size="18px"><Bottom /></el-icon
        ></span>
        <span
          >订单件数高<el-icon size="18px"><Bottom /></el-icon
        ></span>
      </p>
      <!-- 筛选区域 -->
      <div class="block">
        <IocnFont iconName="icon-shaixuan" color="rgb(45,72,195)"></IocnFont>
        <span class="option">筛选</span>

        <el-form :model="form" label-width="120px">
          <el-form-item label="结算状态">
            <el-select v-model="form.region" placeholder="请选择结算状态">
              <el-option label="已结算" value="已结算" />
              <el-option label="未结算" value="未结算" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="form.name"  placeholder="请选择订单状态">
              <el-option label="待发货" value="待发货" />
              <el-option label="待收货" value="待收货" />
              <el-option label="已完成" value="已完成" />
              <el-option label="已失效" value="已失效" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 搜索区域 -->
      <div class="search">
        <IocnFont iconName="icon-sousuo" color="rgb(45,72,195)"></IocnFont>
        <span class="spanSou">搜索</span>
        <el-form :model="formInline" class="demo-form-inline">
          <el-form-item label="精准搜索：">
            <el-input
              v-model="formInline.user"
              placeholder="请输入用户id或名称"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 搜索，重置，以及收起按钮 -->
    <div class="btns">
      <el-button
        type="primary"
        :icon="iconMain"
        @click="top"
        style="background: rgb(23, 28, 73)"
        >{{ text }}</el-button
      >
      <el-button
        type="primary"
        :icon="RefreshRight"
        @click="reset"
        style="background: rgb(255, 195, 6)"
      >
        重置</el-button
      >
      <el-button
        type="primary"
        :icon="Search"
        @click="reserve"
        style="background: rgb(33, 61, 192)"
        >搜索</el-button
      >
      <!--收起后出现搜索框 -->
      <input
        type="text"
        class="lastInput"
        placeholder="请输入用户id或名称"
        v-model="formInline.user"
        v-show="!isShow"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
// 引入阿里图标
import IocnFont from "@/components/IocnFont.vue";
// 引入页面要使用的ICON图标
import { RefreshRight, Search, Top, Bottom } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import useDataStore from "@/stores/user.js";
// 注册
const { tableData, reserve } = useDataStore;
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const formInline = reactive({
  user: "",
  region: "",
});
const value2 = ref("");
let isShow = ref(true);
let iconMain = ref("Top");
let text = ref("收起");

/**
 *  点击收起按钮的时候，进行判断，如果v-show绑定的是显示的，就让它不显示，如果isShow、value=tru就是显示，icon图标变成展开top图标，n按钮内容是收起，如果是false，icon图标变成botton,按钮文本变成展开，就不显示时间插件中的内容
 */
const top = () => {
  isShow.value = !isShow.value;
  iconMain.value = isShow.value ? "Top" : "Bottom";
  text.value = isShow.value ? "收起" : "展开";
};
/**
 * 函数名称：reset重置函数
 * 点击重置实现将搜索框以及关联的日期选中的日期都清空恢复到初始状态
 */
const reset = () => {
  // 点击重置将所选时间清零
  value2.value = [];
  // 将输入框里面的内容清空
  formInline.user = " ";
};
/**
 * 引入的消息弹出框的函数
 */
const open2 = () => {
  ElMessage({
    showClose: true,
    message: "排序成功",
    type: "success",
  });
};
</script>

<style lang="less" scoped>
button {
  border: none;
}
#div {
  box-shadow: 0px 0px 20.002px rgb(0 0 0 / 20%);
  margin-top: 20.002px;
  padding: 18px;
  font-size: 12px !important;
  .text {
    font-size: 12px !important;
    font-weight: bold;
    p {
      span {
        padding: 0 20px;
        display: inline-block;
        margin: 0px 20px;

        line-height: 40px;
      }
      span:nth-child(1) {
        margin-left: 0;
        padding-left: 0;
      }
      span:nth-child(2) {
        background-color: rgb(33, 61, 192);
        color: white;
        text-align: center;
        margin-right: 20.002px;
        border-radius: 16px;
        margin-left: -20px;
      }
    }
    .block {
      display: flex;
      font-weight: bold;
      align-items: center;
      .option {
        width: 39.998px;

        margin-left: 6px;
      }
      form {
        margin-top: 20.002px;
        margin-left: -42px;
        display: flex;
      }
    }

    .search {
      display: flex;
      padding-top: 9.998px;
      margin-top: 9.998px;
      font-weight: bold;

      span {
        width: 33.998px;
        margin-right: 9.998px;
        margin-left: 6px;
      }
      .demo-form-inline {
        margin-top: -8.002px;
      }
    }

  }
}
.lastInput {
  width: 30%;
  border-bottom: 2.002px solid black;
  text-align: center;
  margin-left: 20.002px;
}

  

// #div {
//   box-shadow: 0px 0px 20.002px rgb(0 0 0 / 20%);
// padding: 20.002px;
//   box-sizing: border-box;
//   margin: 20.002px 0;
//   font-size: 12px;
//   .text {
//     p {
//       width: 46%;
//       line-height: 39.998px;
//       display: flex;
//       justify-content: space-between;
//       font-weight: bold;

//       span {
//         width: 69.998px;
//       }
//       button {
//         // flex: 1;
//         font-size: 12px;
//         font-weight: bold;
//       }
//       .order {
//         background-color: rgb(33, 61, 192);
//         color: white;
//         text-align: center;
//         margin-right: 20.002px;
//         border-radius: 20.002px;
//       }
//     }
//     .block {
//       display: flex;
//       font-weight: bold;
//       align-items: center;
//       .option {
//         width: 39.998px;

//         margin-left: 6px;
//       }
//       form {
//         margin-top: 20.002px;
//         margin-left: -42px;
//         display: flex;
//       }
//     }

//     .search {
//       display: flex;
//       padding-top: 9.998px;
//       margin-top: 9.998px;
//       font-weight: bold;

//       span {
//         width: 33.998px;
//         margin-right: 9.998px;
//         margin-left: 6px;
//       }
//       .demo-form-inline {
//         margin-top: -8.002px;
//       }
//     }

//   }
// }
// .lastInput {
//   width: 30%;
//   border-bottom: 2.002px solid black;
//   text-align: center;
//   margin-left: 20.002px;
// }
</style>
